<template>
	<section>
		<h3>基础设置</h3>
		<el-form style="width: 500px" ref="ruleFormRef" :model="userInfoClass.formData.value" label-width="120px">
			<el-form-item label="作者名" prop="username">
				<el-input disabled v-model="userInfoClass.formData.value.username" />
			</el-form-item>
			<el-form-item label="个人介绍" prop="nickname">
				<el-input v-model="userInfoClass.formData.value.nickname" />
			</el-form-item>
			<el-form-item label="作者头像" prop="img">
				<el-upload
					class="avatar-uploader"
					action="http://ikun-pro-ui.fun:3000/upload-file/image"
					:show-file-list="false"
					:on-success="userInfoClass.handleAvatarSuccess"
				>
					<img
						v-if="userInfoClass.formData.value.img"
						:src="`${'http://ikun-pro-ui.fun:3000/static/'}${userInfoClass.formData.value.img}`"
						class="avatar"
					/>
					<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
				</el-upload>
			</el-form-item>
			<h3>三方平台设置</h3>
			<el-form-item label="开启GitHub访问">
				<el-switch v-model="userInfoClass.formData.value.github" inline-prompt active-text="是" inactive-text="否" />
			</el-form-item>
			<el-form-item label="GitHub访问地址" v-show="userInfoClass.formData.value.github">
				<el-input v-model="userInfoClass.formData.value.githuburl" />
			</el-form-item>
			<el-form-item label="开启Gitee访问">
				<el-switch v-model="userInfoClass.formData.value.gitee" inline-prompt active-text="是" inactive-text="否" />
			</el-form-item>
			<el-form-item label="Gitee访问地址" v-show="userInfoClass.formData.value.gitee">
				<el-input v-model="userInfoClass.formData.value.giteeurl" />
			</el-form-item>
			<el-form-item label="开启知乎访问">
				<el-switch v-model="userInfoClass.formData.value.zh" inline-prompt active-text="是" inactive-text="否" />
			</el-form-item>
			<el-form-item label="知乎访问地址" v-show="userInfoClass.formData.value.zh">
				<el-input v-model="userInfoClass.formData.value.zhurl" />
			</el-form-item>
			<el-form-item label="开启CDSN访问">
				<el-switch v-model="userInfoClass.formData.value.csdn" inline-prompt active-text="是" inactive-text="否" />
			</el-form-item>
			<el-form-item label="CSDN访问地址" v-show="userInfoClass.formData.value.csdn">
				<el-input v-model="userInfoClass.formData.value.csdnurl" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="userInfoClass.save()">保存</el-button>
			</el-form-item>
		</el-form>
	</section>
</template>
<script lang="ts" setup>
import { Plus } from '@element-plus/icons-vue'
import { UserInfoClass } from './controller'
let userInfoClass = new UserInfoClass()
</script>
<style scoped>
.avatar-uploader .avatar {
	display: block;
	width: 178px;
	height: 178px;
}
</style>
<style>
.avatar-uploader .el-upload {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
	width: 178px;
	height: 178px;
	font-size: 28px;
	color: #8c939d;
	text-align: center;
}
</style>
